<template>
  <div class="echarts-chart"></div>
</template>
<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'EchartsPieChart',
  setup() {
    const chartInstance = ref(null);
    onMounted(() => {
      chartInstance.value = echarts.init(document.querySelector('.echarts-chart'));
      const options = {
        title: {
          text: '水果销量展示'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'  // Display name, value, and percentage
        },
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '苹果' },
            { value: 310, name: '香蕉' },
            { value: 234, name: '橘子' },
            { value: 135, name: '桃子' },
            { value: 1548, name: '葡萄' }
          ]
        }]
      };
      chartInstance.value.setOption(options);
    });
    return {
      chartInstance
    };
  }
};
</script>
<style scoped>
.echarts-chart {
  width: 100%;
  height: 400px;
}
</style>